<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--载入一些基础的开源架构的CSS-->
	<link rel="stylesheet" type="text/css" href="javascript/library/easyui/themes/default/easyui.css">  
	<link rel="stylesheet" type="text/css" href="javascript/library/easyui/themes/icon.css">
	<!--载入核心JavaScript框架：jquery.easyui-->
	<script type="text/javascript" src="javascript/library/easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="javascript/library/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="javascript/library/base.js"></script>
	<!--载入Ext的扩展Plugin-->
	
	<!--初始化核心命名空间-->
	<script type="text/javascript">
		function qq(value,name){  
	        alert(value+":"+name)  
	    }
	    function a(){
	    	$('#mm').menu('show', {  
			  left: 200,  
			  top: 100  
			});
	    }
	    
	</script>
  </head>
  
  <body>
    <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  
        title="我的Panel" data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">  
    The panel content  
	</div>
	
	<input class="easyui-combobox" name="language"  
        data-options="  
            url:'jsonstore/combobox_data.json',  
            valueField:'id',  
            textField:'name',  
            panelHeight:'auto',  
            onSelect:function(record){  
                alert(record.name)  
            }" />
            
    <div id="dd" class="easyui-draggable" data-options="handle:'#title',axis:'h'" style="width:100px;height:100px;">  
	    <div id="title" style="background:#ccc;">title</div>  
	</div> 
	<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;">
		<div id="title" style="background:#ccc;">title</div>
	</div>
	<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:200" style="width:100px;height:100px;border:1px solid #ccc;"></div>
	<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
	
	<input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>  
	<div id="mm" style="width:120px">  
	    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
	    <div data-options="name:'sports'">Sports News</div>  
	</div>
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="a()">easyui</a>
	
	<div id="mm" class="easyui-menu" style="width:120px;">  
	    <div>New</div>  
	    <div>  
	        <span>Open</span>  
	        <div style="width:100px;">  
	            <div><b>Word</b></div>  
	            <div>Excel</div>  
	            <div>PowerPoint</div>  
	        </div>  
	    </div>  
	    <div data-options="iconCls:'icon-save'">Save</div>  
	    <div class="menu-sep"></div>  
	    <div>Exit</div>  
	</div> 
	
	<a href="javascript:void(0)" id="mb" class="easyui-menubutton"   
        data-options="menu:'#m',iconCls:'icon-edit'">Edit</a>  
	<div id="m" style="width:150px;">  
	    <div data-options="iconCls:'icon-undo'">Undo</div>  
	    <div data-options="iconCls:'icon-redo'">Redo</div>  
	    <div class="menu-sep"></div>  
	    <div>Cut</div>  
	    <div>Copy</div>  
	    <div>Paste</div>  
	    <div class="menu-sep"></div>  
	    <div data-options="iconCls:'icon-remove'">Delete</div>  
	    <div>Select All</div>  
	</div>
	
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
	    <div title="Tab1" style="padding:20px;display:none;">  
	        tab1  
	    </div>  
	    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">  
	        tab2  
	    </div>  
	    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">  
	        tab3  
	    </div>  
	</div>
	
	<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
	    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">  
	        <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
	        <p>Accordion is a part of easyui framework for jQuery.   
	        It lets you define your accordion component on web page more easily.</p>  
	    </div>  
	    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">  
	        content2  
	    </div>  
	    <div title="Title3">  
	        content3  
	    </div>  
	</div>  
  </body>
</html>
